<template>
  <div class="order-ident">
    <Alert>学会使用这个功能，填写[定制拍照]内容的时候，会变的更加容易</Alert>

    <div class="top">
      <Button @click="modal1 = true" type="primary" icon="md-add">新增模版</Button>
    </div>
    <div class="content">
      <!--等级-->
      <div class="table-wrap">
        <div class="table">
          <div class="table-header">
            <Row>
              <Col span="4">
                <div class="th">模版</div>
              </Col>
              <Col span="16">
                <div class="th">照片数量</div>
              </Col>
              <Col span="4">
                <div class="th">操作</div>
              </Col>
            </Row>
          </div>
          <div class="table-content">
            <Row class="table-tr tr-active">
              <Col span="4">
                <div class="td">
                  leo chen
                </div>
              </Col>
              <Col span="16">
                <div class="td">
                  啊是的撒的撒啊是大大是的撒
                </div>
              </Col>
              <Col span="4">
                <div class="td fun">
                  <span>编辑</span>
                  <span @click="onDelete">删除</span>
                </div>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    </div>
    <Modal
        width="60%"
        class-name="vertical-center-modal"
        class="pop-address"
        v-model="modal1"
        title="定制拍照模板"
    >
      <div class="pop-address-content">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="模版名称" prop="name">
            <Input v-model="formValidate.name" placeholder="名"></Input>
          </FormItem>
          <FormItem class="color-wrap" label="照片数量" prop="name">
            <InputNumber v-model="value11" controls-outside></InputNumber>

          </FormItem>
          <FormItem label="拍照要求" prop="name">
            <Card class="upload-wrap" v-for="i in value11" :key="i">
              <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请描述本张照片需要拍摄的位置，也可以在下方上传参考图"></Input>
              <div class="upload">
                <Upload
                    ref="upload"
                    multiple
                    type="drag"
                    action="//jsonplaceholder.typicode.com/posts/"
                    style="display: inline-block;width:58px;">
                  <div style="width: 58px;height:58px;line-height: 58px;">
                    <Icon type="ios-camera" size="20"></Icon>
                  </div>
                </Upload>
              </div>
              <div class="delete">
                <span class="iconfont icon-shanchu"></span>
              </div>
            </Card>
          </FormItem>
        </Form>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "order-ident",
  data() {
    return {
      value11: 1,
      list: [{}],
      modal1: false,
      colorList: ["red", "#999999", "#093482", "#122433", "#398844"],
      formValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: ''
      },
      ruleValidate: {
        name: [
          {required: true, message: 'The name cannot be empty', trigger: 'blur'}
        ],
        mail: [
          {required: true, message: 'Mailbox cannot be empty', trigger: 'blur'},
        ]
      }
    }
  },
  methods: {
    onDelete() {
      this.$Modal.confirm({
        title: '删除模版',
        content: '您确认删除此模版？'
      });
    }
  }
}
</script>

<style scoped lang="less">
.order-ident {
  .top {
    margin-top: 32px;
    .num {
      margin-left: 6px;
      color: @t-text-color;
    }
  }
  .content {
    margin-top: 32px;
    padding-bottom: 24px;
    .table-wrap {
      margin-top: 32px;
      .table {
        &-header {
          padding: 12px;
          background: @t-table-header-bg;
          .th {
            color: @t-title-color;
            font-size: 14px;
            font-weight: 600;
            .all {
              cursor: pointer;
            }
          }
        }
        &-content {
          border-top: 1px solid @t-table-border-color;
          .table-tr {
            padding: 12px;
            border-bottom: 1px solid @t-table-border-color;
            color: @t-text-color;
            font-size: 14px;
            .fun {
              span {
                margin-right: 24px;
                color: @t-title-color;
                cursor: pointer;
              }
              .tag {
                border-radius: 4px;
                background: @primary-color;
                color: #FFFFFF;
                padding: 2px 4px;
              }
            }
          }
        }
      }
    }
    .page {
      text-align: right;
      margin-top: 24px;
    }
  }
}
.pop-address {
  .pop-address-content {
    .flex-content {
      display: flex;
      align-items: center;
      .input {
        margin-left: 16px;
      }
    }
    .upload-wrap {
      margin-bottom: 12px;
      .delete {
        text-align: right;
        .iconfont {
          cursor: pointer;
          font-size: 24px;
        }
      }
      .upload {
        margin-top: 6px;
      }
    }
    .color-list {
      display: flex;
      .color-item {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        margin-right: 12px;
        cursor: pointer;
      }
    }
  }
}
</style>